<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);

      const value = 20
      const option = {
        title: [{
          text: value + '%',
          left: 'center',
          top: '56%',
          textStyle: {
            color: '#c00',
            fontSize: 20,
            fontWeight: 'bold',
          }
        },],
        angleAxis: {
          show: false,
          max: 100 * 360 / 180,
          type: 'value',
          startAngle: 180,
          splitLine: {
            show: false
          }
        },
        barMaxWidth: 20,
        radiusAxis: {
          show: false,
          type: 'category'
        },
        polar: {
          center: ['50%', '66%'],
          radius: '120%'
        },
        series: [{
          type: 'bar',
          data: [{
            value: 100,
            itemStyle: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1, // 从左到右渐变
                      y2: 1,
                      colorStops: [
                        { offset: 0, color: '#3ea0ff' }, // 渐变色起始颜色
                        { offset: 1, color: '#3ea0ff00' }  // 渐变色结束颜色
                      ]
                    }
                  }
          }],
          barGap: '-100%',
          coordinateSystem: 'polar',
          z: 1
        }]
      }
      myChart.setOption(option);
    }
  }
};
</script>